import React, { useState } from 'react';
import './index.scss';
import Button from '../../../../components/Button';
import { SignUpFnType, SignUpType } from '../../type';
import { ApiSignUp } from '../../../../api/sigin';
import { REGULAR_NAME, REGULAR_PASSWORD } from '../../../../constants/regular';
import { sessionSet } from '../../../../utils/storage';
import Emitter from '../../../../utils/events';

// 注册
function SignUp(_props: SignUpFnType) {
  const [info, setInfo] = useState<SignUpType>({
    account: '',
    accountPromise: '',
    password: '',
    passwordPromise: '',
    verifyPassword: '',
    verifyPasswordPromise: '',
  });
  // 验证
  const verify = () => {
    let _status: boolean = true,
      _info: SignUpType = {
        accountPromise: '',
        passwordPromise: '',
        verifyPasswordPromise: '',
      }
    if (!REGULAR_NAME.test(String(info.account))) {
      _info.accountPromise = '字母开头，长度4-12，允许字母数字下划线';
      _status = false;
    }
    if (!REGULAR_PASSWORD.test(String(info.password))) {
      _info.passwordPromise = '大小写字母数字组合，禁特殊字符，长度6-12';
      _status = false;
    }
    if (!REGULAR_PASSWORD.test(String(info.verifyPassword))) {
      _info.verifyPasswordPromise = '大小写字母数字组合，禁特殊字符，长度6-12';
      _status = false;
    } else {
      if (info.password !== info.verifyPassword) {
        _info.verifyPasswordPromise = '密码和确认密码不一致';
        _status = false;
      }
    }
    setInfo({ ...info, ..._info });
    return _status;
  }

  // 提交
  const submit = async () => {
    if (!verify()) return;
    let _data: SignUpType = {
      account: info.account,
      password: info.password,
    }
    const _ApiSignIn = await ApiSignUp(_data);
    if (_ApiSignIn) {
      sessionSet('YH_WEB_FORM_ACCOUNT', info.account || '');
      sessionSet('YH_WEB_FORM_PASSWORD', info.password || '');
      _props.changeTab(1);
      Emitter.emit('toast', {
        message: '注册成功,请登录',
      });
    } else {
      Emitter.emit('toast', {
        message: '注册失败',
        type: 'danger',
      });
    }
  };
  return (
    <div className="sign-up">
      <div className="row">
        <label htmlFor="signUpName">用户名</label>
        <input
          id="signUpName"
          className='input'
          type="text"
          placeholder="请输入用户名"
          onChange={({ target }) => {
            const obj: SignUpType = { ...info, account: target.value }
            setInfo(obj)
          }}
        />
      </div>
      <div className="row">
        <div className='promise'>{info.accountPromise}</div>
      </div>
      <div className="row">
        <label htmlFor="signUpPassword">密码</label>
        <input
          id="signUpPassword"
          className='input'
          type="password"
          placeholder="请输入密码"
          onChange={({ target }) => {
            const obj: SignUpType = { ...info, password: target.value }
            setInfo(obj)
          }}
        />
      </div>
      <div className="row">
        <div className='promise'>{info.passwordPromise}</div>
      </div>
      <div className="row">
        <label htmlFor="signUpPasswordVerify">确认密码</label>
        <input
          id="signUpPasswordVerify"
          className='input'
          type="password"
          placeholder="请输入密码"
          onChange={({ target }) => {
            const obj: SignUpType = { ...info, verifyPassword: target.value }
            setInfo(obj)
          }}
        />
      </div>
      <div className="row">
        <div className='promise'>{info.verifyPasswordPromise}</div>
      </div>
      <div className="row">
        <Button
          text='注册'
          size="large"
          handle={() => submit()}
        />
      </div>
    </div>
  );
}

export default SignUp;